<template>
	<div class="order-list">
		<div class="order-list__box">
			<!-- 头部 -->
			<div class="box-info">
				<div class="box-info__title">
					<template v-if="titleLeft">{{titleLeft}}</template>
					<template v-else>{{item.oid}}</template>
				</div>
				<!-- 操作区域 -->
				<div class="box-info__confirm" v-if="isOperation">
					<div v-if="item.status === 1" @click="confirm">确定收货</div>
					<div class="confirm-carry" v-else>
						<div class="carry">已完成</div>
						<van-icon name="delete-o" @click="remove" />
					</div>
				</div>
			</div>
			<!-- 卡片插槽 -->
			<div class="card-box"><slot /></div>
			<!-- 底部 -->
			<div class="bottom-init">
				<div class="round"><div class="round_l"></div><div class="round_r"></div></div>
				<div class="time">{{item.date}}</div>
				<div class="close">
					<div class="amount">共计{{item.count}}件</div>
					<div class="total">合计￥{{item.total | decimal_res}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'orderlist',
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			// 是否显示操作按钮
			isOperation: {
				type: Boolean,
				default: false
			},
			titleLeft: {
				type: String,
				default: ''
			}
		},
		methods: {
			// 确定收货
			confirm() {
				// 发送通知
				this.$emit("confirm")
			},
			// 删除订单
			remove() {
				// 发送通知
				this.$emit("remove")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-list{
		margin-top: 10px;
		.order-list__box{
			background-color: #fff;
			.box-info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px;
				line-height: 18px;
				font-size: 16px;
				.box-info__confirm{
					.confirm-carry{
						display: flex;
						.carry{
							margin-right: 10px;
						}
					}
				}
			}
			.card-box{
				padding-bottom: 20px;
				border-bottom: 1px dashed rgba($color: #d3d3d3, $alpha: 0.81);
			}
			.bottom-init{
				padding: 10px;
				font-size: 14px;
				position: relative;
				line-height: 18px;
				.round{
					>div{
						position: absolute;
						width: 15px;
						height: 15px;
						background-color: #ecf0f1;
						border-radius: 50%;
						top: -8px;
					}
					.round_l{left: -7px;}
					.round_r{right: -7px;}
				}
				.close{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}
</style>